<template>
  <div class="transaction-wrapper">
    <div class="transaction-content">
      <h3 class="title">
        <div>
          <span class="line"></span>资金明细
        </div>
        <div v-show="is_history">
          <span class="befor-btn" @click="beforeHandle">{{beforFlag ? '迁移后资金明细' : '迁移前资金明细'}}</span>
        </div>
      </h3>
      <div class="content">
        <screen-bar :tab-list="tabList" @changeState="changeState"></screen-bar>
        <div
          class="table-wrapper"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <div v-if="!beforFlag" class="tb-scroll">
            <el-table :data="accountList" :header-cell-style="rowClass" :cell-style="cellStyle">
              <el-table-column prop="create_time" label="时间" width="200"></el-table-column>
              <el-table-column prop="type_words" label="交易类型" width="180"></el-table-column>
              <el-table-column prop="handle_money" label="交易金额（元）" width="180"></el-table-column>
              <el-table-column prop="usable_money" label="可用金额（元）" width="180"></el-table-column>
              <el-table-column prop="remarks" label="说明"></el-table-column>
              <el-table-column width="120">
                <template slot-scope="scope">
                  <span
                    class="goods-details"
                    v-show="scope.row.product_url"
                    @click="toDetails(scope.row.product_url)"
                  >代理详情</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else class="tb-scroll">
            <el-table :data="accountList" :header-cell-style="rowClass" :cell-style="cellStyle">
              <el-table-column prop="date_time" label="时间" width="200"></el-table-column>
              <el-table-column prop="style" label="交易类型" width="180"></el-table-column>
              <el-table-column prop="amount" label="交易金额（元）" width="180"></el-table-column>
              <el-table-column prop="userable_amount" label="可用金额（元）" width="180"></el-table-column>
              <el-table-column prop="msg" label="说明"></el-table-column>
              <el-table-column width="120">
                <template slot-scope="scope">
                  <span
                    class="goods-details"
                    v-show="scope.row.product_url"
                    @click="toDetails(scope.row.product_url)"
                  >代理详情</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-pagination
          background
          layout="prev, pager, next, total, jumper"
          :page-size="listParams.limit"
          :total="paginationQuery.total"
          :current-page="listParams.p"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import ScreenBar from "./components/ScreenBar";
import { getAccountDetailAjax } from "@/api/myagency";
import { getCapitalDetails } from "@/api/capital";
import { mapGetters } from "vuex";

export default {
  name: "transaction",
  computed: {
    ...mapGetters(["memberInfo"]),
  },
  data() {
    return {
      tabList: [
        { keyword: "全部", count: 0 },
        { keyword: "充值", count: 0 },
        { keyword: "提现", count: 0 },
        { keyword: "代理费", count: 0 },
        { keyword: "订金", count: 0 },
      ],
      accountList: [],
      accountState: [],
      paginationQuery: {
        total: 0,
      },
      listParams: {
        p: 1,
        limit: 10,
        type: 0,
      },
      loading: false,
      other_role: null,
      beforFlag: false,
      is_history: "",
    };
  },
  created() {
    console.log("是否代理商", this.memberInfo.status);
    if (this.memberInfo.status == 1) {
      //   this._getAccountDetailAjax();
      this._getCapitalDetails();
    } else {
      if (this.memberInfo.is_auth == 1) {
        this.$message.error("您还没加入云木屋代理，正在为您跳转");
        setTimeout(() => {
          this.$router.push({ name: "contractServices" });
        }, 1000);
      } else {
        this.$message.error("您还没有完成实名认证，正在为您跳转");
        setTimeout(() => {
          this.$router.push({ name: "explain" });
        }, 1000);
      }
    }
  },
  methods: {
    // 迁移前后切换
    beforeHandle() {
      this.beforFlag = !this.beforFlag;
      if (this.beforFlag) {
        if (this.tabList.length > 5) {
          this.tabList.splice(5, 2);
        }
        this._getAccountDetailAjax();
      } else {
        this._getCapitalDetails();
      }
    },
    // 获取迁移后资金明细
    _getCapitalDetails() {
      this.loading = true;
      getCapitalDetails(this.listParams)
        .then((res) => {
          if (res.code == 1) {
            this.accountList = res.data.list || [];
            this.other_role = res.data.other_role || null;
            this.is_history = res.data.is_history;
            if (res.data.other_role == "SPECIAL" && this.tabList.length <= 5) {
              this.tabList.push(
                {
                  keyword: "转入",
                  count: 0,
                },
                {
                  keyword: "转出",
                  count: 0,
                }
              );
            }
            console.log("资金明细列表", this.accountList);
            this.accountState = res.data.statistics || [];
            this.paginationQuery.total = +res.data.total || 0;
            this.initTabCount();
          } else {
            console.log("资金明细获取失败", res.msg || "获取失败");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取迁移前资金明细
    _getAccountDetailAjax() {
      this.loading = true;
      getAccountDetailAjax(this.listParams)
        .then((res) => {
          this.accountList = res.data.list || [];
          console.log("资金明细列表", this.accountList);
          this.accountState = res.data.statistics || [];
          this.paginationQuery.total = +res.data.total || 0;
          this.initTabCount();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 代理详情
    toDetails(url) {
      window.open(url, "_self");
    },
    currentChange(index) {
      this.listParams.p = index;
      if (this.beforFlag) {
        this._getAccountDetailAjax();
      } else {
        this._getCapitalDetails();
      }
    },
    changeState(type) {
      this.listParams.type = type;
      this.listParams.p = 1;
      if (this.beforFlag) {
        this._getAccountDetailAjax();
      } else {
        this._getCapitalDetails();
      }
    },
    initTabCount() {
      let list = this.accountState;
      this.tabList.filter((item, index) => {
        item.count = list[index] || 0;
      });
    },
    rowClass() {
      return "background:rgba(240,249,252,1);font-size:14px;color:#999;font-weight:400;text-align:center;height:40px;padding: 0;";
    },
    cellStyle() {
      return "height:60px;font-size:14px;color:#333;text-align:center;";
    },
  },
  components: {
    ScreenBar,
  },
};
</script>
<style lang="scss" scoped>
.transaction-wrapper {
  .transaction-content {
    min-width: 1400px;
  }
  .goods-details {
    cursor: pointer;
    color: #999;
    text-decoration: underline;
    &:hover {
      color: #fe6616;
    }
  }
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding-bottom: 0;
  .title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    height: 54px;
    line-height: 54px;
    padding: 0 20px;
    background: #fff;
    margin: 0 0 5px 0;
    display: flex;
    justify-content: space-between;
    .line {
      display: inline-block;
      width: 3px;
      height: 18px;
      background: #fe6616;
      border-radius: 2px;
      margin: 0 10px -2px 0;
    }
    .befor-btn {
      font-size: 14px;
      font-weight: 400;
      margin-right: 40px;
      cursor: pointer;
      color: #999;
      &:hover {
        color: #fe6616;
      }
    }
  }
  .content {
    flex: 1;
    padding: 0 60px;
    background: #fff;
    padding-bottom: 20px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .table-wrapper {
    margin-top: 10px;
    flex: 1;
    overflow: hidden;
    min-height: 640px;
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
